<!--
 * @Description:
 * @Version: 1.0
 * @Autor: yel
 * @Date: 2022-03-10 15:33:36
 * @LastEditors: zhou
 * @LastEditTime: 2022-07-15 17:14:09
-->
<template>
    <div
        id="app"
        :style="{
            '--screen_height': getScreenH,
            '--screen_width': getScreenW,
            transform: `scale(${t_num})`,
            width: d_width + 'px',
            height: d_height + 'px',
            left: left + 'px',
            top: top + 'px',
        }"
        @click="handleGlobal"
    >
        <router-view />
    </div>
</template>

<script>
export default {
    name: "App",
    metaInfo() {
        return {
            title:
                this.$store.state.settings.dynamicTitle &&
                this.$store.state.settings.title,
            titleTemplate: (title) => {
                return title
                    ? `${title} - ${process.env.VUE_APP_TITLE}`
                    : process.env.VUE_APP_TITLE;
            },
        };
    },
    data() {
        return {
            t_num: 1, // 缩放比例
            d_width: 1920, // 设计图宽
            d_height: 820, // 设计图高
            left: 0,
            top: 0,
        };
    },
    computed: {
        getScreenW() {
            return this.$store.state.screenW;
        },
        getScreenH() {
            return this.$store.state.screenH;
        },
    },
    created() {
        window.addEventListener("resize", this.screenAdapter);
        this.screenAdapter();
    },
    destroyed() {
        window.removeEventListener("resize", this.screenAdapter);
    },
    methods: {
        screenAdapter() {
            let w = document.documentElement.clientWidth;
            let h = document.documentElement.clientHeight;
            if (w / h > 21 / 9) {
                this.t_num = h / this.d_height;
                this.top = 0;
                this.left = (w - (h * 21) / 9) / 2;
            } else {
                this.t_num = w / this.d_width;
                this.top = (h-((w*9)/21)) / 2
                this.left = 0
            }
            this.$store.dispatch("setScreenW", w);
            this.$store.dispatch("setScreenH", h);
        },
        // 全局监听点击事件
        handleGlobal() {
            this.$store.commit("SET_HANDLE_GLOBAL");
        },
    },
};
</script>

<style lang="scss">
#app {
    position: absolute;
    transform-origin: 0 0 0;
}
</style>
